<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" :offset="6">
        <el-card class="card">
          <div><strong class="texts">支付方式</strong></div>
          <div style="margin: 15px 0 0 10px">
            <el-radio v-model="radio" label="1">钱包余额</el-radio>
            <el-radio v-model="radio" label="2" disabled>支付宝</el-radio>
          </div>
          <el-divider></el-divider>
          <div>
            <strong class="texts">商家：{{ goods.createBy }}</strong>
          </div>
          <div style="padding: 10px">
            <el-row>
              <el-col :span="6"
                ><img :src="goods.mainImgUrl" class="imga"
              /></el-col>
              <el-col :span="18">
                <div style="margin: 0 0 0 60px">
                  <strong class="texts" style="vertical-align: middle"
                    >商品名:</strong
                  ><span class="textr">{{ goods.goodsName }}</span>
                </div>
                <div style="margin: 20px 0 0 60px">
                  <strong class="texts" style="margin-right: 60px"
                    >单价:<span style="color: red; margin-left: 10px"
                      >¥{{ (goods.goodsPrice / 100).toFixed(2) }}</span
                    ></strong
                  >
                </div>
                <div style="margin: 20px 0 0 60px">
                  <strong class="texts"
                    >折后:
                    <span style="color: red; margin-left: 10px"
                      >¥{{
                        (
                          (goods.goodsPrice / 100) *
                          (goods.goodsDiscount / 100)
                        ).toFixed(2)
                      }}</span
                    >
                  </strong>
                </div>
                <div style="margin: 20px 0 0 60px">
                  <strong class="texts">库存:</strong
                  ><span style="margin-left: 10px">{{ goods.goodsStock }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-divider></el-divider>
          <div style="padding: 10px">
            <strong class="texts">购买数量:</strong>
            <el-input-number
              v-model="num"
              controls-position="right"
              @change="handleChange"
              :min="1"
              :max="goods.goodsStock"
              style="width: 120px"
            />
            <div style="margin-top: 20px">
              <strong class="texts"
                >应付总额：
                <span style="color: red"
                  >¥{{
                    (
                      (goods.goodsPrice / 100) *
                      (goods.goodsDiscount / 100) *
                      this.num
                    ).toFixed(2)
                  }}</span
                >
              </strong>
            </div>
            <div style="margin-top: 20px">
              <strong class="texts"
                >钱包余额：<span style="color: red">{{
                  (wallet.walletBalance / 100).toFixed(2)
                }}</span></strong
              >
            </div>
            <div style="margin-top: 20px">
              <strong class="texts"
                >请输入密码：
                <el-input
                  v-model="queryParams.password"
                  type="password"
                  size="small"
                  style="width: 200px"
                ></el-input>
              </strong>
            </div>
          </div>
          <div>
            <el-button type="danger" style="float: right" @click="submitOrder()"
              >提交订单</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getGoods } from "@/api/shop/goods";
import { getWallet } from "@/api/system/wallet";
import { subOrder } from "@/api/shop/order";

export default {
  name: "Orderdetail",
  data() {
    return {
      num: 1,
      queryParams: {
        goodsId: undefined,
        goodsCount: 1,
        password: "",
      },
      radio: "1",
      goods: {},
      wallet: {
        walletBalance: 0,
      },
      imgUrl: [],
    };
  },
  created() {
    let goods_id = this.$route.query.goods_id;
    this.getGoods(goods_id);
    this.getWallet();
  },
  methods: {
    getGoods(goods_id) {
      getGoods(goods_id).then((response) => {
        this.goods = response.data;
        this.imgUrl = response.data.mainImgUrl;
      });
    },
    getWallet() {
      getWallet().then((response) => {
        if (response.data !== undefined) {
          this.wallet = response.data;
        }
      });
    },
    handleChange(value) {
      console.log(value);
    },
    submitOrder() {
      this.queryParams.goodsId = this.goods.goodsId;
      this.queryParams.goodsCount = this.num;
      subOrder(this.queryParams).then((response) => {
        if (response.code === 200) {
          this.num = 1;
          // 跳转到支付成功页面
          this.$router.push({ path: "/paysuccess" });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.texts {
  color: rgb(96, 98, 102);
  margin-right: 10px;
}

.textr {
  width: 300px;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}

.card {
  height: 630px;
}

.imga {
  height: 150px;
  width: 150px;
  margin-left: 10px;
}
</style>
